<template>
	<view class="">
		<scroll-view class="sidebar" :scroll-y="true"
			:style="`width:${!eventFolds?210:70}px`"
		>
			<view>
				<view class="logo-element">
					<view class="logo">
						<text class="iconfont icon-quanjing"></text>
					</view>
					<view class="logo-text" v-if="!eventFolds" >
						易派到家
					</view>
				</view>
				<view class="enmu-element">
					<menu-item :data="menu" :menuId="currentMenuId" ></menu-item>
				</view>
			</view>
		</scroll-view>
	</view>
	<view class="">
		<view class="win-top"  :style="`margin-left: ${ !eventFolds?210:70}px;`">
			<view class="top-the-left">
				<view class="search-for-piece">
					<view class="search-for-piece-menu" @click="clickZhedie" >
						<text class="iconfont icon-caidan"></text>
					</view>
					<view class="search-for-piece-input"
						:class="isSearch ? 'search-select' :''"		
					>
						<u-input v-model="value" type="text" :border="false" :trim="true"
							placeholder="请输入您要查找的内容..." 
							@focus="this.isSearch = true ;"
							@blur="this.isSearch = false ;"
						/>
					</view>
				</view>
			</view>
			<view class="top-the-right">
				<view class="notice">
					<view class="notice-element">
						<text class="iconfont icon-xinfeng"></text>
					</view>
					<view class="notice-element">
						<text class="iconfont icon-tongzhizhongxin"></text>
					</view>
					<view class="notice-element">
						{{userInfo.nickname}} &nbsp;
						<view class="notice-element" style="font-size:12px;color:#23b7e5;margin-top:5px;" 
							@click="logout"
						>
							<text class="iconfont icon-tuichu" style="font-size:14px;color:#21afda" ></text>
							<text>退出</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="uni-global-box" :style="`margin-left: ${ !eventFolds?220:80}px;`" >
		<view class="qiun_grid">
			<view class="charts-box" >
				<qiun-data-charts style="transform: scale(1);"  type="map" :opts="opts" :chartData="chartData" />
			</view>
			<view class="charts-box">
				<qiun-data-charts type="word" :opts="opts02" :chartData="chartData02" />
			</view>
		</view>
		<view class="qiun_grid">
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts01" :chartData="chartData01" />
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData01: {},
				opts01: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "收益率",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "70%",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					},
				},
				chartData02: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['word'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts02: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					enableScroll: false,
					extra: {
						word: {
							type: "normal",
							autoColors: false
						}
					}
				},
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['map'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4","#ea7ccc"],
					padding: [10, 0, 0, 0],
					dataLabel: true,
					enableScroll: false,
					extra: {
						map: {
							border: true,
							borderWidth: 1,
							borderColor: "#666666",
							fillOpacity: 0.6,
							activeBorderColor: "#F04864",
							activeFillColor: "#FACC14",
							activeFillOpacity: 1
						}
					}
				},
				// left
				menu:[],
				currentMenuId:[null,null,null],
				eventFolds:false,
				// top
				value:'',
				isSearch:false,
				userInfo:{},
				eventFolds:false,
			}
		},
		watch: {
			eventFold(e){
				this.eventFolds = e
			},
			onCurrentPage(e){
				this.currentPage()
			},
			getShopStore(){
				this.userInfo = uni.getStorageSync('uni-id-pages-userInfo');
			}
		},
		computed: {
			eventFold() { return this.$store.state.eventFold } ,
			onCurrentPage(){
				return this.$store.state.currentPage;
			},
			getShopStore(){
				return this.$store.state.userInfo
			},
		},
		created() {
			let res = uni.getStorageSync("menu-data") || null;
			if (res && typeof res === 'object' && res.time > Date.now()) {
				setTimeout(() => {
					this.menu = res.data;
					this.getMenu(true);
					this.currentPage() ;
				}, 500);
			} else {
				this.getMenu(false);
			}
			this.userInfo = uni.getStorageSync('uni-id-pages-userInfo');
			this.$store.dispatch("fetchInfoData") ;
		},
		onLoad() {
			
		},
		methods: {
			getServerData() {
				//"其他地图数据下载地址：http://datav.aliyun.com/tools/atlas/"
				uni.request({
					url: 'https://geo.datav.aliyun.com/areas_v3/bound/371700_full.json'
				}).then(result => {
					let res = {
						series: result.data.features
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				})
			},
			getServerData02() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
								name: "跨全端图表",
								textSize: 25,
								data: undefined
							},
							{
								name: "微信小程序",
								textSize: 20,
								data: undefined
							},
							{
								name: "支付宝小程序",
								textSize: 20,
								data: undefined
							},
							{
								name: "百度小程序",
								textSize: 20,
								data: undefined
							},
							{
								name: "QQ小程序",
								textSize: 20,
								data: undefined
							},
							{
								name: "头条小程序",
								textSize: 20,
								data: undefined
							},
							{
								name: "抖音小程序",
								textSize: 20,
								data: undefined
							},
							{
								name: "360小程序",
								textSize: 20,
								data: undefined
							},
							{
								name: "跨全端",
								textSize: 10,
								data: undefined
							},
							{
								name: "跨全端",
								textSize: 12,
								data: undefined
							},
							{
								name: "跨全端",
								textSize: 10,
								data: undefined
							},
							{
								name: "跨全端",
								textSize: 12,
								data: undefined
							},
							{
								name: "跨全端",
								textSize: 10,
								data: undefined
							},
							{
								name: "跨全端",
								textSize: 12,
								data: undefined
							},
							{
								name: "跨全端",
								textSize: 10,
								data: undefined
							},
							{
								name: "跨全端",
								textSize: 12,
								data: undefined
							}
						]
					};
					this.chartData02 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerData01() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
									"name": "一班",
									"value": 50
								},
								{
									"name": "二班",
									"value": 30
								},
								{
									"name": "三班",
									"value": 20
								},
								{
									"name": "四班",
									"value": 18
								},
								{
									"name": "五班",
									"value": 8
								}
							]
						}]
					};
					this.chartData01 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// left
			getMenu(isStore=false) {
				let userInfo = uni.getStorageSync('uni-id-pages-userInfo');
				uniCloud.importObject("menu",{customUI:true}).getMenuTreeStructure(userInfo.role).then(result => {
					const data = result.result ;
					this.menu = data;
					let store = { data,time: Date.now() + 1000 * 60 * 60 * 1  };
					uni.setStorageSync("menu-data", store);
					if(!isStore){
						this.currentPage() ;
					}
				})
			},
			// left
			currentPage() {
				const path = this.$store.state.currentPage;
			    let data = this.menu;
			    /* 蓝斑.json 出品 */
			    const checkChildren = (children, parentMenuId, level) => {
			        for (let child of children) {
			            if (child.url === path) {
			                this.currentMenuId[level] = child.menu_id;
			                return true;
			            }
			            if (!child.url && child.children) {
			                if (checkChildren(child.children, child.menu_id, level + 1)) {
			                    this.currentMenuId[level] = child.menu_id;
			                    return true;
			                }
			            }
			        }
			        return false;
			    };
			    for (let i = 0; i < data.length; i++) {
			        if (checkChildren(data[i].children, null, 0)) {
			            return uni.$emit('currentMenuId', { currentMenuId: this.currentMenuId });
			        }
			    }
			},
			// top
			logout(){
				uni.showModal({
					title:"您确认退出吗?",content:"退出后不再接收任何信息,请慎重"
				}).then(res =>  {
					if(!res.confirm) return ;
					this.$store.commit("SET_OUT_LOGIN", { user:null })
				})
			},
			//top
			clickZhedie() {
				let bool = this.$store.state.eventFold;
				if (bool) {
					uni.setLeftWindowStyle({
						width: '210px',
						"margin-top": "-50px",
						"zIndex": 9,
						transition: ".5s"
					})
					uni.setTopWindowStyle({
						"height": "50px",
						"margin-left": "210px",
						"zIndex": 9,
						transition: ".5s"
					})
				} else {
					uni.setLeftWindowStyle({
						width: '70px',
						"margin-top": "-50px",
						"zIndex": 9,
						transition: ".5s"
					})
					uni.setTopWindowStyle({
						"height": "50px",
						"margin-left": "70px",
						"zIndex": 9,
						transition: ".5s"
					})
				}
				this.eventFolds = !this.eventFolds
				this.$store.commit("SET_FOLD_EVENT", this.eventFolds)
			},
		},
		onReady() {
			this.getServerData();
			this.getServerData01();
			this.getServerData02();
		},
	}
</script>

<style lang="scss" >
	.charts-box {
		padding: 10px;
		box-shadow: 0 1px 30px 0 #e4eded;
	}
	.qiun_grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(505px, 1fr));
		column-gap: 30px;
		row-gap: 20px;
		margin: 30px 0;
	}
	.uni-global-box{
		margin-top:50px;
		transition:.5s;
	}
	
</style>
<style lang="scss">
	.logo-element {
		display: flex;
		gap: 10px;
		padding: 15px 20px;
		align-items: center;
		font-weight: bold;
		.logo .iconfont {
			font-size: 25px;
			font-weight: 400;
		}
	
		.logo-text {
			letter-spacing: 2px;
		}
	}
	.sidebar {
		color:#fff;
		position: fixed;
		height: 100vh ;
		box-sizing: border-box;
		background-color: #1c2b36;
		padding-bottom: 10px;
		padding: 10px 0px;
		transition:.5s;
		margin-top: -50px;
	}
	/* #ifdef H5 */
	.sidebar ::-webkit-scrollbar {
		scrollbar-width: thin;
		display: none
	}
	/* #endif */
</style>
<style lang="scss">
	.top-the-left{
			flex:1;
			.search-for-piece-input{
				padding:0 10px;
				border-bottom: 1px solid #fff;
				width:40%;
			}
			.search-select{
				transition: .5s;
				border-bottom: 1px solid $uni-color-primary;
			}
			.search-for-piece{
				display: flex;
				align-items: center;
				height:100%;
				gap:20px;
				padding-left:20px;
				.search-for-piece-menu{
					color:#fff;
					padding:5px 8px;
					border-radius: 3px;
					background-color:$uni-color-primary;
					.iconfont{
						font-size:22px;
						font-weight: bold;
					}
				}
				.search-for-piece-menu:hover{
					cursor:pointer;
					transition:.5s;	
					color:$uni-bg-color-grey;
					background: #19a9d5;
				}
			}
		}
		.top-the-right{
			flex:1;
			display: flex;
			justify-content: flex-end;
			padding-right:20px;
			.notice{
				display: flex;
				align-items: center;
				height:100%;
				gap:25px;
				cursor: pointer;
				.notice-element{
					display: flex;
					align-items: center;
					.iconfont{
						color:$uni-text-color-placeholder;
						font-size:22px;
					}
				}
			}
		}
	.win-top {
		transition:.5s;
		display: flex;
		height:50px;
		box-shadow: 0 1px 10px 0 #f0f0f0;
		position:fixed;
		top:0;
		right:0;
		left:0px;
		background:#fff;
	}
</style>
<style>
	page{
		padding:0;
	}
</style>